<!DOCTYPE html>
<html>

<head>
  <title>SVG.js Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.2.0/svg.min.js"></script>
  </link>
  <style>
    html,
    body {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="svgContainer"></div>
  <div id="svgContainer2"></div>
  <script src="./src//util.js"></script>
  <script src="./src/draw1.js"></script>
  <script src="./src/draw2.js"></script>
  <script>

    const CONTAINER_WIDTH = 340;
    const CONTAINER_HEIGHT = 250;

    // 创建SVG容器
    const draw = SVG()
      .addTo('#svgContainer')
      .size(CONTAINER_WIDTH, CONTAINER_HEIGHT)
      .viewbox(0, 0, CONTAINER_WIDTH, CONTAINER_HEIGHT);



    const draw2 = SVG()
      .addTo('#svgContainer2')
      .size(CONTAINER_WIDTH, CONTAINER_HEIGHT)
      .viewbox(0, 0, CONTAINER_WIDTH, CONTAINER_HEIGHT);

    // 设置背景色
    // draw.rect(CONTAINER_WIDTH, CONTAINER_HEIGHT).fill('#f2f2f2');

    // 保存SVG图形
    const str = draw.svg();
    console.log(str);

    const main = async () => {
      const dataJSON = await request('./data.json')
      /** 绘制第一个图形 */
      draw.rect(CONTAINER_WIDTH, CONTAINER_HEIGHT).fill(dataJSON.data[0].background_color);
      drawImage1(draw, dataJSON.data[0])

      /** 绘制第二个图形 */
      draw2.rect(CONTAINER_WIDTH, CONTAINER_HEIGHT).fill(dataJSON.data[1].background_color);
      drawImage2(draw2, dataJSON.data[1])
    
    }

    main()


  </script>
</body>

</html>